<!-- =======================================================
  * Author: Jéssica Yang
  ======================================================== -->

<template>
  <div>
    <!--标签页组件-->
    <el-tabs v-model="activeName" class="tab_container" @tab-click = "load">

      <!--未审核事务页-->
      <el-tab-pane name= 0 >
        <span slot="label"><i class="el-icon-document"></i> 未审核</span>

        <!--新增事务表单-->
        <el-form :inline="true">
          <el-form-item >
            <!--新增事务按钮-->
            <el-button type="primary" icon="el-icon-plus" @click="add">新增事务</el-button>
          </el-form-item>
        </el-form>

        <!--未审核事务的列表表格-->
        <el-table :data="notCheckedTableData" :max-height="tableHeight">
          <!--表头-->
          <el-table-column type="index" width="40" align="center"></el-table-column>
          <el-table-column prop="title" label="事务标题" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <div class="operation_show" slot-scope="scope">
              <!--对当前行进行编辑操作按钮-->
              <el-button type="primary" icon="el-icon-info" @click="check(scope.row.id)">查看</el-button>
              <el-button type="success" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
              <el-popconfirm
                  confirm-button-text='确定'
                  cancel-button-text='取消'
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定删除吗？"
                  @confirm="del(scope.row.id)"
              >
                <!--删除当前行按钮-->
                <el-button type="danger" icon="el-icon-delete" slot="reference" style="margin-left:10px">删除</el-button>
              </el-popconfirm>
            </div>
          </el-table-column>
        </el-table>

        <!--分页块-->
        <div>
          <el-pagination
              style="margin-top: 10px"
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[10,20,30,40,50]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>

      <!--审核已通过事务页-->
      <el-tab-pane name= 2 >
        <span slot="label"><i class="el-icon-document-checked"></i> 通过</span>
        <!--审核已通过事务的列表表格-->
        <el-table :data="passTableData" :max-height="tableHeight" >
          <!--表头-->
          <el-table-column type="index" width="40" align="center"></el-table-column>
          <el-table-column prop="title" label="事务标题" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <div class="operation_show" slot-scope="scope">
              <!--查看当前事务信息按钮-->
              <el-button type="success" icon="el-icon-info" @click = "check(scope.row.id)">查看</el-button>
            </div>
          </el-table-column>
        </el-table>

        <!--分页块-->
        <div>
          <el-pagination
              style="margin-top: 10px"
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[10,20,30,40,50]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>

      <!--审核后被退回的事务页-->
      <el-tab-pane name = 1 >
        <span slot="label"><i class="el-icon-document-delete"></i> 退回</span>
        <!--被退回的事务列表表格-->
        <el-table :data="sendBackTableData" :max-height="tableHeight">
          <!--表头-->
          <el-table-column type="index" width="40" align="center"></el-table-column>
          <el-table-column prop="title" label="事务标题" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <div class="operation_show" slot-scope="scope">
              <!--重新编辑报表信息按钮-->
              <el-button type="danger" icon="el-icon-info" @click = "edit(scope.row)" >重新编辑</el-button>
            </div>
          </el-table-column>
        </el-table>

        <!--分页块-->
        <div>
          <el-pagination
              style="margin-top: 10px"
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagenum"
              :page-sizes="[10,20,30,40,50]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-tab-pane>

    </el-tabs>

    <!--新增事务对话框-->
    <el-dialog title="新增事务" :visible.sync="addFormVisible">
      <!--新增事务表单-->
      <el-form>
        <!--事务标题输入框-->
        <el-form-item label="事务标题">
          <el-input v-model="addForm.title" placeholder="请输入事务标题" clearable auto-complete="off"></el-input>
        </el-form-item>
        <!--事务内容输入框-->
        <el-form-item label="事务内容">
          <el-input v-model="addForm.contents" placeholder="请输入事务内容" clearable auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--新增事务对话框按钮-->
      <div slot="footer" class="dialog_footer">
        <!--关闭对话框按钮-->
        <el-button @click="addFormVisible = false" type="danger">取消</el-button>
        <!--保存信息按钮-->
        <el-button type="primary" @click="saveAdd">保存</el-button>
      </div>
    </el-dialog>

    <!--事务查看对话框-->
    <el-dialog title="事务查看" :visible.sync="checkVisible">
      <!--事务描述列表-->
      <el-descriptions :column="1" :colon="false" border :labelStyle="LS">
        <!--事务标题描述-->
        <el-descriptions-item label="事务标题">{{this.business.title}}</el-descriptions-item>
        <!--事务内容描述-->
        <el-descriptions-item label="事务内容">{{this.business.contents}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!--编辑事务对话框-->
    <el-dialog title="编辑事务" :visible.sync="editFormVisible" label-width="140px">
      <!--编辑事务表单-->
      <el-form>
        <!--事务标题输入框-->
        <el-form-item label="事务标题">
          <el-input v-model="editForm.title" placeholder="请输入事务标题" clearable auto-complete="off"></el-input>
        </el-form-item>
        <!--事务内容输入框-->
        <el-form-item label="内容">
          <el-input v-model="editForm.contents" placeholder="请输入事务内容" clearable auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--编辑事务对话框按钮-->
      <div slot="footer" class="dialog_footer">
        <!--关闭对话框按钮-->
        <el-button @click="addFormVisible = false" type="danger">取消</el-button>
        <!--保存信息按钮-->
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "UserReportList",
  data (){
    return{
      //分页组件
      currentPage:1,
      total:0,
      pagenum:1,
      pagesize:10,

      //表格数据
      notCheckedTableData: [],
      passTableData: [],
      sendBackTableData: [],

      tableHeight:"",  //表格高度

      uid: this.$store.state.id,  //用户id
      bid: null,   //事务id

      //事务字段
      business:{
        id:null,
        uid:null,
        title:'',
        contents:''
      },

      activeName:'0',   //默认标签页

      addForm:{},   //新增表单
      editForm:{},   //编辑表单

      addFormVisible: false,   //新增表单对话框
      checkVisible: false,     //查看事务描述列表对话框
      editFormVisible: false,   //编辑表单对话框

      //描述列表的label列宽度
      LS:{
        width:'150px'
      }
    }
  },
  created() {
    this.load()   //网页创建时加载数据
    this.getTableHeight(); //网页创建时获得表格高度
  },
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  methods: {
    load() {   //网页创建时加载数据
      this.request.get("/business/findAllForU/" + this.pagenum + "/" + this.pagesize + "/" + this.$store.state.id + "/" + parseInt(this.activeName))
          .then(res => {
            if (this.activeName === '0')
              this.notCheckedTableData = res.data.data.records
            if (this.activeName === '1')
              this.sendBackTableData = res.data.data.records
            if (this.activeName === '2')
              this.passTableData = res.data.data.records
            this.total = res.data.data.total
          })
    },

    //打开新增事务对话框
    add(){
      this.addForm = {}
      this.addFormVisible = true
    },

    //保存新增事务
    saveAdd(){
      this.addForm.uid = this.uid
      this.request.post("/business/newBusiness", this.addForm).then(res =>{
        if(res.data.code === '200'){
          this.$message.success("保存成功")
          this.addFormVisible = false
          this.load()
        }else{
          this.$message.error(res.data.msg)
        }
      })
    },

    //查看当前事务信息
    check(bid){
      this.request.get("/business/checkBusiness/" + bid).then(res =>{
        if (res.data.code === '200'){
          this.business = res.data.data
          this.checkVisible = true
          this.bid = bid
        }
        else this.$message.error("请求出错")
      })
    },

    //打开编辑事务对话框
    edit(row){
      this.editForm = JSON.parse(JSON.stringify(row))
      this.editForm.title = ""
      this.editForm.contents = ""
      this.editFormVisible = true
    },

    //保存编辑
    saveEdit(){
      this.request.post("/business/edit", this.editForm).then(res =>{
        if(res.data.code === '200'){
          this.$message.success("保存成功")
          this.editFormVisible = false
          this.load()
        }else{
          this.$message.error("保存失败")
        }
      })
    },

    //删除当前事务
    del(id){
      this.request.delete("/business/delete/" + id).then(res =>{
        if(res.data.code === '200'){
          this.$message.success("删除成功")
          this.load()
        }else{
          this.$message.error("删除失败")
        }
      })
    },

    //分页查询
    handleSizeChange(pagesize) {   //每页条数改变时触发
      console.log(pagesize)
      this.pagesize = pagesize
      this.load()
    },
    handleCurrentChange(pagenum) {   //当前页码改变时触发
      console.log(pagenum)
      this.pagenum = pagenum
      this.load()
    },

    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 206; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },

  }
}
</script>

<style scoped>

/*将表格操作列设为光标停留时显示*/
.operation_show{
  display: none;
}
.el-table__body tr:hover > td .operation_show{
  display: block;
}

</style>